<template>
  <div>
    <!-- 基本信息 -->
    <TopFilter
      :list="topFilterList"
      :cols="3"
      labelWidth="80"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>

    <FilterTable
      ref="table"
      selectionType="single"
      :onRowSelectChange="selectChange"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :columns="columns"
      :isPagination="false"
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls">
        <el-button type="primary" @click="addReceiption">新增</el-button>
      </template>
    </FilterTable>
		<div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">返 回</el-button>
      <el-button :disabled="this.isChoice" @click="saveDialog" type="primary">保 存</el-button>
    </div>
    <!-- 开票信息人新增/编辑 -->
    <BaseDialog
      :visible.sync="visible"
      :title="dialogTitle"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <NewCustomer :type="handleType" :rowData="formData" @close="closeNewDialog" />
    </BaseDialog>
  </div>
</template>

<script>
import { queryCustomerOne, deleteCustomerOne } from '@/api/retail/salesmanage/salesordermanage';
import { dictionary } from '@/utils/dictMixin';
import { notifyAction } from '@/utils';
import moment from 'moment'
import NewCustomer from './newCustomer'

export default {
  name: "SelectCustomer",
  mixins: [dictionary],
  components: {
    NewCustomer
  },
  data() {
    return {
      topFilterList: this.createTopFilters(), //上方明细数据
      fetchApi: queryCustomerOne,
      fetchParams: {},
      columns: this.createTableColumns(), //table数据
      visible: false,
      selectedRows: [], //选中列表中的行
      isChoice: true, //按钮是否可以选择
      dialogTitle: '开票信息人新增',
      formData: {},
      handleType: 'new'
    }
  },
  created () {
    let { rowData } = this
  },
  mounted () {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    init (){

    },
    createTopFilters() { //上方明细数据
      return [
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'customerType',
          placeholder: '',
          itemList: this.createDictList('1523')
        },
        {
          type: 'INPUT',
          label: '开票名称',
          fieldName: 'customerName',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '开票手机',
          fieldName: 'mobilePhone',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '证件类型',
          fieldName: 'ctCode',
          placeholder: '',
          itemList: this.createDictList('1508') // 原'1058'修改为'7035' 再改为'1058'
        },
        {
          type: 'INPUT',
          label: '证件号码',
          fieldName: 'certificateNo',
          placeholder: '',
        },
      ];
    },
    createTableColumns () {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 90,
          fixed: 'left',
          render: (props, h) => {
            if(this.type != 'show'){
              // <el-button size="mini" type="text" onClick={() => this.deleteCustomer(props.row)}>
              //   删除
              // </el-button>
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.editCustomer(props.row)}>
                    修改
                  </el-button>
                </div>
              );
            }
          }
        },
        {
          title: '开票名称',
          dataIndex: 'customerName',
        },
        {
          title: '开票手机',
          dataIndex: 'mobilePhone',
        },
        {
          title: '开票电话',
          dataIndex: 'phone',
        },
        {
          title: '开票客户类型',
          dataIndex: 'customerType',
          filterItems: this.createDictList('1523'),
          render: props => {
            return <span> { this.preDictHandler(props.row.customerType, '1523')} </span>
          }
        },
        {
          title: '证件类型',
          dataIndex: 'ctCode',
          filterItems: this.createDictList('1508'), // 原'1058'修改为'7035' 再改为'1508'
          render: props => {
            return <span> { this.preDictHandler(props.row.ctCode, '1508')} </span>
          }
        },
        {
          title: '证件号码',
          dataIndex: 'certificateNo',
        },
        {
          title: '开票地址',
          dataIndex: 'adderss',
        },
        {
          title: '性别',
          dataIndex: 'gender',
          filterItems: this.createDictList('1002'),
          render: props => {
            return <span> { this.preDictHandler(props.row.gender, '1002')} </span>
          }
        },
        {
          title: '生日',
          dataIndex: 'birthday',
          render: props => {
            return <span> { this.preDateHandler(props.row.birthday,'YYYY-MM-DD')} </span>
          }
        },
        {
          title: '行业类型',
          dataIndex: 'industry',
          filterItems: this.createDictList('7030'),
          render: props => {
            return <span> { this.preDictHandler(props.row.industry, '7030')} </span>
          }
        },
      ]
    },
		changeHandle(val) { //搜索事件
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    deleteCustomer (row) {
      let params = {
        potentialCustomersId: row.potentialCustomersId
      }
      deleteCustomerOne(params).then(res=>{
        if (res.success) {
          notifyAction('删除成功')
          this.fetchParams = Object.assign({},this.fetchParams)
        } else {
          notifyAction(res.errMsg, 'error')
        }
      })
    },
    editCustomer (row) {
      this.visible = true
      this.dialogTitle = '开票信息人修改'
      this.formData = row
      this.handleType = 'edit'
    },
    addReceiption () {
      this.visible = true
      this.dialogTitle = '开票信息人新增'
      this.handleType = 'add'
    },
    saveDialog () { //保存
      if(this.selectedRows.length > 0){
        let selectObj = this.selectedRows[0]
        let sendOutObj = {
          customerType: selectObj.customerType, //客户类型
          customerName: selectObj.customerName, //开票名称
          phone: selectObj.phone, // 开票电话
          ctCode: selectObj.ctCode, // 证件类型
          certificateNo: selectObj.certificateNo, // 证件号码
          contactName: selectObj.contactName,// invoiceLinkMan// 开票联系人
          mobilePhone: selectObj.mobilePhone,// invoiceLinkManPhone // 开票联系人手机
          gender: selectObj.gender, // 性别
          birthday: selectObj.birthday, // 生日
          industryType: selectObj.industry, // 行业类型
          address: selectObj.adderss,	// TODO:联系地址(address/adderss)
          customerId: selectObj.potentialCustomersId
        }
        console.log('sendOutObj',sendOutObj)
        this.$emit('close', false, sendOutObj)
      }
    },
    closeNewDialog (val) {
      this.visible = false
      if (val == 'refresh') {
        this.fetchParams = Object({},this.fetchParams)
      }
    },
    closeDialog () {
      this.$emit('close', false)
    },
    closeHandler (val) {
      this.visible = false
      if (val == 'refresh') {
        this.init()
        this.fetchParams = Object.assign({},this.fetchParams)
      }
    },
    selectChange (rows){ //选中时触发的函数
      this.selectedRows = rows;
      this.isChoice = this.selectedRows.length > 0? false: true;
    },
    // 字典数据使用前预处理
    preDictHandler(val, code){
      let resultText = val && String.prototype.includes.call(val, code) ? this.createDictText(val, code) : val;
      return resultText;
    },
    // 日期预处理
    preDateHandler(val, formatCode='YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
  }
}
</script>

<style lang="less" scoped>
</style>
